<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection"
	content="telephone=no,email=no,date=no,address=no">
<title>服务支持</title>
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
<link rel="stylesheet" type="text/css"
	href="../css/aui-pull-refresh.css" />
<style>
.aui-list .aui-list-item i.aui-iconfont {
	-webkit-align-self: center;
	align-self: center;
	font-size: 18px;
}

img.aui-img-round {
	border-radius: 1%;
}
</style>
</head>
<body> 
		<section class="aui-content">
			<ul class="aui-list aui-media-list" id="nice-articles" style="padding-bottom: 50px;">
				<li class="aui-list-item aui-list-item-middle" onclick="openDetailed()">
					<div class="aui-media-list-item-inner">
						<div class="aui-list-item-inner aui-list-item-arrow">
							<div class="aui-list-item-text">
								<div class="aui-list-item-title aui-font-size-14">
									加载中...
								</div>
								<div class="aui-list-item-right aui-font-size-14" >
									加载中...
								</div>
							</div>
							<div style="font-size: 12px;text-indent: 1em;color:gray; " id="address" >加载中...</div>
						</div>
					</div>
				</li> 
			</ul>
		</section>
		<section class="aui-content" id="list"></section>
		<div class="aui-toast"  style="display:none;" id="loading">
			<div class="spinner aui-toast-content">
				<div class="spinner-container container1">
					<div class="circle1"></div>
					<div class="circle2"></div>
					<div class="circle3"></div>
					<div class="circle4"></div>
				</div>
				<div class="spinner-container container2">
					<div class="circle1"></div>
					<div class="circle2"></div>
					<div class="circle3"></div>
					<div class="circle4"></div>
				</div>
				<div class="spinner-container container3">
					<div class="circle1"></div>
					<div class="circle2"></div>
					<div class="circle3"></div>
					<div class="circle4"></div>
				</div>
			</div>
		</div>
</body>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/aui-search.js"></script>
<script type="text/javascript">
 	//得到选择机会信息的id
	var id = "${param.id}";
	//当前初始页
	var pageNumber = 1;
	//每页显示多少条
	var pageSize = 10;
	var countSize = 0;

	//初始方法
	$(function() {
		$("#nice-articles").html("");
		$("#list").html("");
		getPage(1, 1000);
	});


	function getPage(pageNumber, pageSize){
		//var productName = $("#search-input").val();
		$.ajax({
			url : '${pageContext.request.contextPath}/queryServiceSupportList.do?id='+ id,
			type : "POST",
			data : {
				page : pageNumber,
				limit : pageSize
				//ServiceSupportName : productName
			},
			dataType : "json",
			success : function(data) {
				var rets  = data;
				
				if (rets.code == 0) {
					if (rets.data != "" && rets.data != null) {
						var da = rets.data;
						var html = "";
						for (var i = 0; i < da.length; i++) {
							html += '<li class="aui-list-item aui-list-item-middle" ><div class="aui-media-list-item-inner"><div class="aui-list-item-inner"><div class="aui-list-item-text">';
							html += '<div class="aui-list-item-title aui-font-size-14" style="text-indent: 1em;" >' + da[i].serviceName + '</div><div class="aui-list-item-right aui-font-size-14">' + da[i].servicePhone + '</div>';
							html += "</div><div style=\"font-size: 12px;text-indent: 1em;color:gray;\" >";
							html +=	da[i].address;
							html += "</div></div></div></li>";
						}
						countSize = rets.total;
						//复制总记录数
					} else {
						$("#list").html("<div style='width:100%;text-align:center;color:#999;padding:10px 0;'>暂无数据！</div>");
					}
					$("#nice-articles").append(html);
				} else {
					$("#list").html("<div style='width:100%;text-align:center;color:#999;padding:10px 0;'>暂无数据！</div>");
				}
				
			}
		});
	}
	
</script>
</html>